<!-- 反馈表单模块 -->
<section id="<?= $data['type'] ?? 'feedback' ?>" class="py-[<?= $data['styles']['padding']['top'] ?? '60' ?>px] py-[<?= $data['styles']['padding']['bottom'] ?? '60' ?>px] bg-[<?= $data['styles']['backgroundColor'] ?? '#F8F9FA' ?>]" style="border-radius: <?= $data['styles']['borderRadius'] ?? '0px' ?>; max-width: <?= $data['styles']['maxWidth'] ?? '100%' ?>; margin: <?= $data['styles']['margin'] ?? '0 auto' ?>">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div>
          <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
            <?= $data['content']['sectionBadge'] ?>
          </div>
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
            <?= $data['content']['sectionTitle'] ?>
          </h2>
          <p class="text-dark/70 mb-8">
            <?= $data['content']['sectionSubtitle'] ?>
          </p>
          
          <form class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <?php if (!empty($data['content']['form']['fields'])): ?>
                <?php $halfFields = array_filter($data['content']['form']['fields'], function($field) {
                  return $field['type'] === 'text' || $field['type'] === 'email' || $field['type'] === 'phone';
                });
                $halfFields = array_slice($halfFields, 0, 2); // 只取前两个字段放在一行
                foreach ($halfFields as $field): ?>
                  <div>
                    <label for="feedback_<?= $field['name'] ?>" class="block text-sm font-medium text-dark/70 mb-1"><?= $field['label'] ?><?= $field['required'] ? ' *' : '' ?></label>
                    <input 
                      type="<?= $field['type'] ?>" 
                      id="feedback_<?= $field['name'] ?>" 
                      class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" 
                      placeholder="<?= $field['placeholder'] ?>"
                      <?= $field['required'] ? 'required' : '' ?>
                    >
                  </div>
                <?php endforeach; ?>
              <?php endif; ?>
            </div>
            
            <?php if (!empty($data['content']['form']['fields'])): ?>
              <?php foreach ($data['content']['form']['fields'] as $field): ?>
                <?php if ($field['type'] === 'select'): ?>
                  <div>
                    <label for="feedback_<?= $field['name'] ?>" class="block text-sm font-medium text-dark/70 mb-1"><?= $field['label'] ?><?= $field['required'] ? ' *' : '' ?></label>
                    <select 
                      id="feedback_<?= $field['name'] ?>" 
                      class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary appearance-none bg-white"
                      <?= $field['required'] ? 'required' : '' ?>
                    >
                      <option value="">请选择<?= $field['label'] ?></option>
                      <?php if (!empty($field['options'])): ?>
                        <?php foreach ($field['options'] as $option): ?>
                          <option value="<?= $option['value'] ?>"><?= $option['label'] ?></option>
                        <?php endforeach; ?>
                      <?php endif; ?>
                    </select>
                    <div class="relative -mt-10 pointer-events-none">
                      <i class="fa fa-chevron-down absolute right-4 top-1/2 -translate-y-1/2 text-dark/40"></i>
                    </div>
                  </div>
                <?php elseif ($field['type'] === 'textarea'): ?>
                  <div>
                    <label for="feedback_<?= $field['name'] ?>" class="block text-sm font-medium text-dark/70 mb-1"><?= $field['label'] ?><?= $field['required'] ? ' *' : '' ?></label>
                    <textarea 
                      id="feedback_<?= $field['name'] ?>" 
                      rows="<?= $field['rows'] ?? 5 ?>" 
                      class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" 
                      placeholder="<?= $field['placeholder'] ?>"
                      <?= $field['required'] ? 'required' : '' ?>
                    ></textarea>
                  </div>
                <?php elseif ($field['type'] === 'file'): ?>
                  <div>
                    <label class="block text-sm font-medium text-dark/70 mb-2"><?= $field['label'] ?></label>
                    <div class="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center hover:border-primary/50 transition-custom">
                      <i class="fa fa-cloud-upload text-4xl text-dark/30 mb-3"></i>
                      <p class="text-dark/70 mb-2">点击或拖拽文件到此处上传</p>
                      <p class="text-dark/50 text-sm">支持 JPG, PNG, PDF 格式，最大 <?= $field['maxSize'] ?? 10 ?>MB</p>
                      <input type="file" class="hidden" id="fileUpload" accept="<?= $field['accept'] ?? '*' ?>">
                      <label for="fileUpload" class="mt-4 inline-block px-4 py-2 bg-primary/10 text-primary rounded-lg text-sm font-medium cursor-pointer hover:bg-primary/20 transition-custom">
                        选择文件
                      </label>
                    </div>
                  </div>
                <?php endif; ?>
              <?php endforeach; ?>
            <?php endif; ?>
            
            <?php if (!empty($data['content']['form']['agreement'])): ?>
              <div class="flex items-start">
                <input type="checkbox" id="privacy" class="mt-1 w-4 h-4 text-primary focus:ring-primary/50 border-gray-300 rounded"<?= $data['content']['form']['agreement']['required'] ? ' required' : '' ?>>
                <label for="privacy" class="ml-2 text-sm text-dark/70">
                  <?= $data['content']['form']['agreement']['text'] ?>
                </label>
              </div>
            <?php endif; ?>
            
            <button type="submit" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom font-medium">
              <?= $data['content']['form']['submitButton']['text'] ?? '提交反馈' ?>
            </button>
          </form>
        </div>
        
        <div class="hidden lg:block">
          <div class="relative">
            <img src="https://picsum.photos/seed/feedback/600/400" alt="反馈表单" class="w-full h-auto rounded-2xl shadow-lg">
            <div class="absolute -top-6 -right-6 bg-white p-6 rounded-xl shadow-md max-w-xs">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                  <i class="fa fa-comments text-primary text-2xl"></i>
                </div>
                <div>
                  <h4 class="font-bold">感谢您的反馈</h4>
                  <p class="text-dark/70 text-sm">我们将尽快处理</p>
                </div>
              </div>
              <div class="space-y-3">
                <div class="flex items-center justify-between">
                  <span class="text-dark/70 text-sm">平均响应时间</span>
                  <span class="font-medium">24小时</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-dark/70 text-sm">解决率</span>
                  <span class="font-medium">95%</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-dark/70 text-sm">客户满意度</span>
                  <span class="font-medium">98%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <?php if (!empty($data['content']['contactInfo'])): ?>
        <div class="mt-12 text-center text-dark/70">
          <p><?= $data['content']['contactInfo']['text'] ?></p>
          <p class="mt-2">
            <i class="fa fa-phone mr-2"></i> <?= $data['content']['contactInfo']['phone'] ?> 
            <span class="mx-4">|</span> 
            <i class="fa fa-envelope mr-2"></i> <?= $data['content']['contactInfo']['email'] ?>
          </p>
        </div>
      <?php endif; ?>
    </div>
  </div>
</section>